<template>
  <div class="navbar_index">
    <div class="container">
      <div class="row">
        <div class="col-xl-2 col-lg-3 col-md-3">
          <img src="../assets/logo.gif" class="img-fluid my-2" alt="xinde">
        </div>
        <div class="col-xl-10 col-lg-9 col-md-9">
          <div class="py-1 link">
            <a class="d-inline-block p-1" href="http://mall.xinde.org" target="_blank">信德书城</a>
            <a class="d-inline-block p-1" href="http://v.xinde.org" target="_blank">信德视频</a>
            <a class="d-inline-block p-1" href="http://mall.xinde.org/book" target="_blank">信德电子书</a>
            <a class="d-inline-block p-1" href="http://mall.xinde.org/epaper" target="_blank">信德电子报</a>
            <a class="d-inline-block p-1" href="http://mall.xinde.org/info" target="_blank">信息发布</a>
            <a class="d-inline-block p-1" href="http://www.xinde.org/page" target="_blank">定汉基金</a>
            <a
              class="d-inline-block p-1"
              href="http://www.xinde.org/XindeFb/dingbao.html"
              target="_blank"
            >汇款方式</a>
            <a class="d-inline-block p-1" href="http://www.jinde.org/" target="_blank">进德公益</a>
            <a
              class="d-inline-block p-1"
              href="http://www.xinde.org/xinde/fics/index"
              target="_blank"
            >信德文化学会/研究所</a>
            <a
              class="d-inline-block p-1"
              href="http://new.xinde.org/"
              target="_blank"
            >公教万年历(晨祷、晚祷、诵读日课)</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="bg-primary mb-2">
        <router-link to="/" class="btn btn-primary">首页</router-link>
        <router-link
          :to="'/list/' + item.id +'/' + item.pid"
          v-for="(item, index) in catList"
          :key="index"
          :class="item.id == pid?'active':''"
          class="btn btn-primary"
        >{{item.title}}</router-link>
        <router-link to="/special" class="btn btn-primary">专题</router-link>
        <router-link to="/prayer" class="btn btn-primary">祈祷室</router-link>
        <router-link to="/link" class="btn btn-primary">友情链接</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  created() {
    this.setCatList();
  },
  computed: {
    ...mapState({
      catList: state => state.cat.catList
    }),
    pid() {
      return this.$route.params.id;
    }
  },
  methods: {
    ...mapActions("cat", ["setCatList"])
  }
};
</script>

<style scoped>
.btn {
  border-radius: 0;
}

.link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  min-height: 64px;
}
</style>


